<template>

	<view class="container">
		<view>
			<view class="nihi"></view>
			<view class="zhujian">
				<view class="botton">
					<view class="tt">
						<view class="circle">
							<view class="word3">{{username}}</view>
						</view>
					</view>
					<view class="content">
						<view class="word1">{{dept}}&nbsp;&nbsp;I&nbsp;&nbsp;{{post}}&nbsp;&nbsp;I&nbsp;&nbsp;{{role}}
						</view>
					</view>
					<view class="content1" @click="ViewAccount">
						<view class="word">账号</view>
						<view style="margin-right: 40rpx; color: #9d9d9d;">{{zhanghoa}}</view>
					</view>
					<view class="content1" @click="openPopup">
						<view class="word">修改密码</view>
						<image src="../../static/my/ListRightArrows.jpg" class="xx"></image>
					</view>
					<view class="content1" @click="openLogoutPopup">
						<view class="word">退出登录</view>
						<image src="../../static/my/ListRightArrows.jpg" class="xx"></image>
					</view>
				</view>

			</view>

		</view>
		<!-- 弹窗组件 -->
		<uni-popup ref="popupRef" >
			<view class="popup-content">
				<form @submit.prevent="submitForm">
					<view class="pro_item">
						<label for="oldPassword"><text>*</text>旧密码：</label>
						<view class="my-view">
							<input v-model="user.oldPassword" id="oldPassword" type="password" placeholder="请输入旧密码"
								class="my-input" />
						</view>
					</view>

					<view  class="pro_item">
						<label for="newPassword"><text>*</text>新密码：</label>
						<view class="my-view">
							<input v-model="user.newPassword" id="newPassword" type="password" placeholder="请输入新密码"
								class="my-input" />
						</view>
					</view>

					<view  class="pro_item">
						<label for="confirmPassword"><text>*</text>确认密码：</label>
						<view class="my-view">
							<input v-model="user.confirmPassword" id="confirmPassword" type="password" class="my-input"
								placeholder="请确认新密码" />
						</view>
					</view>

					<view>
						<button type="primary" @click="submitForm">提交</button>
					</view>
				</form>
			</view>
		</uni-popup>
		<!-- 退出确认弹窗 -->
		<uni-popup ref="logoutPopupRef" type="dialog">
			<view class="popup-content">
				<view class="logout_title">确定要退出登录吗？</view>
				
				<view class="popup-actions">
					<button @click="confirmLogout" class="confirm-button" size="mini">确认</button>
					<button @click="closeLogoutPopup" class="cancel-button" size="mini">取消</button>
				</view>
			</view>
		</uni-popup>

	</view>



</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue"
	import {
		UserDetails
	} from "@/store/UserDetails.js"
	import {
		useInfoStore
	} from '@/store/user.js'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		updateUserPwd
	} from "@/api/login.js"
	// 获取 uni-popup 的 ref
	const popupRef = ref(null);
	// 退出确认弹窗 ref
	const logoutPopupRef = ref(null);
	const user = ref({
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	});
	//用户信息
	const UserDetail = UserDetails();
	//App-Token
	const userInfo = useInfoStore();
	const username = ref('');
	const post = ref('');
	const role = ref('');
	const dept = ref('');
	const zhanghoa = ref('')
	const FetchFromTheUserDetailsCache = () => {
		// 确保 UserDetail.UserText 存在
		const user = UserDetail?.UserText;

		// 获取岗位数据
		const posts = user?.posts;
		//获取角色信息
		const roles = user?.roles;

		if (user) {
			// 提取用户信息并赋值
			username.value = user.data.nickName || '用户名';
			zhanghoa.value = user.data.userName || '账号'
			// 如果有岗位数据，使用 postIds 查找岗位名称
			post.value = user.postIds && user.postIds.length > 0 ?
				posts.find(post => post.postId === user.postIds[0])?.postName || '岗位' :
				'岗位'; // 如果没有岗位数据，返回默认值

			// 获取第一个角色
			role.value = user.roleIds && user.roleIds.length > 0 ?
				roles.find(role => role.roleId === user.roleIds[0])?.roleName || '角色' :
				'角色';

			// 获取部门名称
			dept.value = user.data.dept?.deptName || '部门';
		} else {
			// 如果没有用户数据，可以设置默认值
			username.value = '用户名';
			post.value = '职位';
			role.value = '角色';
			dept.value = '部门';
		}
	};
	const submitForm = async () => {
		// 校验密码是否匹配
		if (!user.value.oldPassword || !user.value.newPassword || !user.value.confirmPassword) {
			uni.showToast({
				title: '请输入所有数据',
				icon: 'none',
			});
			return;
		}

		if (user.value.newPassword !== user.value.confirmPassword) {
			uni.showToast({
				title: '新密码与确认密码不匹配',
				icon: 'none',
			});
			return;
		}
		if (user.value.newPassword.length < 5) {
			uni.showToast({
				title: '新密码必须至少包含5个字符',
				icon: 'none',
			});
			return;
		}
	

		// 调用更新密码的接口
		const res = await updateUserPwd(user.value.oldPassword, user.value.newPassword);

		if (res.code === 200) {
			// 密码修改成功
			uni.showToast({
				title: res.msg,
				icon: 'success',
				duration: 2000
			});
			// 清空表单
			confirmLogout();
		} else {
			// 密码修改失败
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
			user.value.oldPassword = '';
			user.value.newPassword = '';
			user.value.confirmPassword = '';
		}
	};

	onMounted(() => {
		FetchFromTheUserDetailsCache();
	})
	onShow(() => {
		FetchFromTheUserDetailsCache();
	})
	//账号按钮
	const ViewAccount = () => {

	}
	// 打开退出确认弹窗
	const openLogoutPopup = () => {
		logoutPopupRef.value.open();
	};

	// 关闭退出确认弹窗
	const closeLogoutPopup = () => {
		logoutPopupRef.value.close();
	};

	// 确认退出登录
	const confirmLogout = () => {
		wx.clearStorage();
		uni.reLaunch({
			url: '/pages/login/login',
		});
	};

	// 打开弹窗
	const openPopup = () => {
		console.log("点击了修改密码按钮");
		popupRef.value.open(); // 使用 ref 打开弹窗
	};

	// 关闭弹窗
	const closePopup = () => {
		popupRef.value.close(); // 使用 ref 关闭弹窗
	};
</script>

<style lang="scss" scoped>
	.container {
		
		/* 确保容器充满整个屏幕或父容器 */
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}

	.content {
		width: 688rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(153, 153, 153, 0.2);
		z-index: 1;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.content1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	
		height: 84rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(153, 153, 153, 0.2);
		z-index: 1;
		margin-bottom: 30rpx;

	}

	.zhujian {
		display: flex;
		justify-content: center;
		margin-top: -220rpx;
	}



	.nihi {
		height: 35vh;
		width: 100vw;
		background: linear-gradient(to bottom right, #4e9af1, #76e1f3);
		/* 渐变底色 */
		background:
			repeating-linear-gradient(45deg, #fff, #fff 10px, #eee 10px, #eee 20px),
			/* 条纹 */
			linear-gradient(to bottom right, #4e9af1, #76e1f3);
		/* 渐变底色 */
		background-blend-mode: multiply;
		/* 混合模式 */
		z-index: -1;

	}

	.xx {
		width: 30rpx;
		height: 40rpx;
		margin-right: 30rpx;

	}

	.popup-content {
		margin: 0 auto;
		padding: 20px;
		background-color: white;
		border-radius: 8px;
		z-index: 9999;
		
		
		/* 确保弹窗显示在最上层 */
		.pro_item{
			
				width: 540rpx;
			color: #666;
			text{
				color: #ff0000;
				margin-right: 5px;
				font-style: inherit;
				vertical-align: middle;
			}
		}
	}

	.my-input {
		display: inline-block;
		padding: 3px 10px;
		font-size: 14px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.my-view {
		border: 1px solid #999;
		/* 边框样式 */
		border-radius: 5px;
		/* 圆角效果 */
		padding: 5px;
		/* 内边距让内容和边框之间留出间距 */
		display: inline-block;
		/* 保证包裹内部内容 */
		margin: 10px 0;
		/* 上下留出空间 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		/* 添加轻微阴影提升视觉效果 */
		display: flex;
		flex-direction: column;
	}

	.circle {
		width: 150rpx;
		/* 圆的直径 */
		height: 150rpx;
		/* 圆的直径 */
		background-color: #5b9bd5;
		/* 背景颜色 */
		color: white;
		/* 字体颜色 */
		border-radius: 50%;
		/* 圆形 */
		display: flex;
		/* 使用 flex 布局 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		font-size: 16px;
		/* 字体大小 */
		font-weight: bold;
		/* 字体加粗 */
		text-transform: uppercase;
		/* 字母大写（可选） */
	}

	.word3 {
		text-align: center;
	}

	.tt {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: -50rpx;
	}

	.word {
		margin-left: 20rpx;
		width: 200rpx;
		height: 25rpx;
		font-family: SourceHanSansSC;
		font-weight: 500;
		font-size: 27rpx;
		color: #666666;
		line-height: 37rpx;
	}

	.word1 {
		margin: 0px auto;
		height: 25rpx;
		font-family: SourceHanSansSC;
		font-weight: 500;
		font-size: 27rpx;
		color: #666666;
		line-height: 37rpx;
	}

	.word2 {
		width: 100rpx;
		height: 31rpx;
		font-family: SourceHanSansSC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 37rpx;

	}

	.vv {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		margin-top: 230rpx;
	}



	/* 表单组样式 */
	.form-group {
		margin-bottom: 15px;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		font-size: 14px;
		color: #333;
	}

	.form-group input {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		margin-top: 5px;
	}

	/* 提交按钮样式 */
	.submit-btn {
		width: 100%;
		padding: 10px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
	}

	.submit-btn:hover {
		background-color: #005bb5;
	}

	.popup-actions {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	.confirm-button {
		background-color: #f56c6c;
		color: #fff;
		padding: 4px 20px;
		border-radius: 5px;
	}

	.cancel-button {
		background-color: #e0e0e0;
		color: #000;
		padding: 4px 20px;
		border-radius: 5px;
		margin-left: 10rpx;
	}
	.logout_title{
		height: 30px;
		line-height: 30px;
		width: 340rpx;
	}
</style>